<template>
  <div id="PG-SGA">
   <div class="rom">
      <div class="top">
        <van-nav-bar
          class="van-nav-bar"
          title="PG-SGA"
          left-arrow
          left-text="返回"
          @click-left="onClickLeft()"
          fixed 
          placeholder
        ></van-nav-bar>
        <div class="date">{{ list.created !== undefined ? list.created.split(" ")[0] : '' }}</div>
      </div>
      <div class="bom">
        <div class="bom-info">
          <div class="journalTitle">
            <!-- <img src="@/assets/images/journal/stjyd.png" alt /> -->
            <h1>基本情况记录</h1>
          </div>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="20">
              <van-field 
              v-model="list.tizhong" 
              label="当前体重" 
              type="number" 
              placeholder="暂无数据"
              readonly/>
            </van-col>
            <van-col span="3" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="20">
              <van-field
                v-model="list.tizhong1"
                label="一个月前体重"
                placeholder="暂无数据"
                type="number"
                readonly/>
            </van-col>
            <van-col span="3" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="20">
              <van-field
                v-model="list.tizhong2"
                label="六个月前体重"
                placeholder="暂无数据"
                type="number"
                readonly/>
            </van-col>
            <van-col span="3" class="company">kg</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="20" class="old">
              <van-field
                readonly
                label="过去两周我的体重"
                placeholder=""
              />
            </van-col>
          </van-row>
          <van-radio-group style="padding-left:16px" v-model="list.tizhongbianhua" direction="horizontal" disabled>
            <van-radio icon-size="12px" :name="1">减轻(1)</van-radio>
            <van-radio icon-size="12px" :name="2">没变化(0)</van-radio>
            <van-radio icon-size="12px" :name="3">增加(0)</van-radio>
          </van-radio-group>
        </div>
        <div class="bom-info bom-infoTow main">
          <div class="journalTitle">
            <!-- <img src="@/assets/images/journal/stzz.png" alt /> -->
            <h1>主管整体营养状况评量表</h1>
          </div>
          <div class="eat">
            <p class="titleP">进食情况 （多选）</p>
            <div class="eatCon">
              <span class="serialNumber">1</span>
              <div class="subject"> 
                <p>在过去的1月内，我的进食情况与平时情况相比：</p> 
                <div class="subjectCon" >
                  <div class="checkBox" v-for="(item,idx) in eat" :key="idx">
                    <van-checkbox  icon-size="12px" shape v-model="eat[idx].check"  ref="checkboxes" disabled>{{ item.title }}</van-checkbox>
                  </div>
                </div>
              </div>
            </div>
            <div class="atPresent eatCon">
              <span class="serialNumber">2</span>
              <div class="subject"> 
                <p>我目前进食（多选）</p> 
                <div class="subjectCon" >
                  <div class="checkBox" v-for="(item,idx1) in atPresent" :key="idx1">
                    <van-checkbox  icon-size="12px" shape v-model="atPresent[idx1].check"  ref="checkboxes" disabled>{{ item.title }}</van-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="symptom">
            <p class="titleP">症状 （多选）</p>
            <div class="eatCon">
              <span class="serialNumber">1</span>
              <div class="subject"> 
                <p>最近2周我经常存在以下问题影响我摄入足够的饮食（多选）</p> 
                <div class="subjectCon" >
                  <div class="checkBox" v-for="(item,idx2) in symptom" :key="'a'+idx2">
                    <van-checkbox  
                    icon-size="12px" 
                    shape 
                    v-model="symptom[idx2].check"
                    ref="checkboxes"
                    disabled>
                    {{ item.title }}
                    </van-checkbox>
                  </div>
                  <p style="margin-top:10px;font-size:12px">其他</p>
                  <div class="checkBox" v-for="(item,idx3) in symptomQT" :key="'b'+idx3">
                    <van-checkbox  
                    icon-size="12px" 
                    shape 
                    v-model="symptomQT[idx3].check"
                    ref="checkboxes"
                    disabled>
                    {{ item.title }}
                    </van-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="activity">
            <p class="titleP">活动和身体功能（单选）</p>
            <div class="eatCon">
              <span class="serialNumber">1</span>
              <div class="subject"> 
                <p>在过去的1月，我的总体活动情况是</p> 
                <div class="subjectCon" >
                  <van-radio-group v-model="list.huodonginfo" direction="horizontal" disabled>
                    <van-radio 
                    icon-size="12px" 
                    shape  
                    v-for="(item,item1) in activity" 
                    :key="item1" 
                    :name='item.id'>
                    {{item.title}}
                    </van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="bom-info main">
          <div class="journalTitle">
            <!- <img src="@/assets/images/journal/stjyd.png" alt /> ->
            <h1>营养风险筛查</h1>
          </div>
          <div class="">
            <div class="weightCon">
              <p style="font-size: 15px;color:#000;font-weight: bold;">体重丢失评分</p> 
              <div class="problemBox" v-for="(item,index) in weight" :key="index">
                <span class="serialNumber">{{ index + 1 }}</span>
                <p class="problem">{{ item.problem }}</p>
                <div class="choice">
                  <van-radio-group  v-model="item.radio" @change="weightChange($event,index)" direction="horizontal">
                    <van-radio name="1" icon-size="12px" shape="square">是</van-radio>
                    <van-radio name="2" icon-size="12px" shape="square">否</van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
          </div>
        </div> -->
        <!-- <van-button class="btn" @click="submit" type="info" block>提交</van-button> -->
        <div class="bom-info main">
          <div class="journalTitle">
            <!-- <img src="@/assets/images/journal/stjyd.png" alt /> -->
            <h1>营养受损状态</h1>
          </div>
          <div class="weightCon">
            <p style="font-size: 15px;text-align:left;">
              {{defen}}
            </p> 
            <p style="font-size: 15px;text-align:left;">
              {{p}}
            </p> 
          </div>
        
        </div>
      </div>
   </div>
  </div>
</template>
<script>
import apiConfig from "../../../config/api.config";
import { pgsga } from "@/apis/patient"
export default {

  data() {
    return {
      date:null,
      list: {
       
      },
      defen:"",
      p:'',
      radioTz:[],
      eat:[{check:'',title:"没变化"},{check:'',title:"比以往多"},{check:'',title:"比以往少"},],
      atPresent:[
        {check:'',title:"正常饮食"},
        {check:'',title:"正常饮食但比正常情况量少"},
        {check:'',title:"少量固体食物"},
        {check:'',title:"只能进流食"},
        {check:'',title:"只能口服营养制剂"},
        {check:'',title:"几乎吃不下什么"},
        {check:'',title:"只能管饲或静脉营养"}
        ],
      symptom:[
        {check:'',title:"吃饭没有问题"},
        {check:'',title:"无食欲，不想吃饭"},
        {check:'',title:"恶心"},
        {check:'',title:"呕吐"},
        {check:'',title:"便秘"},
        {check:'',title:"腹泻"},
        {check:'',title:"口腔溃疡"},
        {check:'',title:"口干"},
        {check:'',title:"感觉食品没味，变味"},
        {check:'',title:"食物气味不好"},
        {check:'',title:"吞咽困难"},
        {check:'',title:"一会就饱了"},
        {check:'',title:"疼痛"},
        {check:'',title:"腹胀"},
      ],
      symptomQT:[
        {check:'',title:"抑郁"},
        {check:'',title:"经济（金钱）"},
        {check:'',title:"牙齿问题"},
      ],
      activity:[
        {id:'1',check:'',title:"正常，无限制"},
        {id:'2',check:'',title:"不像往常，但还能起床轻微活动"},
        {id:'3',check:'',title:"多数时候不想起床活动，但卧床或坐椅的时间不超过12个小时"},
        {id:'4',check:'',title:"几乎干不了什么，一天多数时间卧床或坐椅上"},
        {id:'5',check:'',title:"几乎完全卧床，无法起床"},
        ],
      weight:[
        {problem:'BMI<20.5',radio:[]},
        {problem:'病人在过去3个月有体重下降吗？',radio:[]},
        {problem:'病人在过去1周内有摄食减少吗？',radio:[]},
        {problem:'病人有严重疾病吗？（如ICU治疗）',radio:[]},
      ],

    };
  },

  methods: {
    onClickLeft() {
      localStorage.removeItem('pgsga')
      this.$router.go(-1); //返回上一层
    },
  },
  mounted() {
    var arr = localStorage.getItem('pgsga')
    if(arr != null){
      this.list = JSON.parse(arr)
      console.log(JSON.parse(arr).jsinfo[0])
      this.list.jsinfo.forEach((item,idx) => {
        this.eat.forEach((val,i) => {
          if(item == i+1){
            val.check = true
          }
        })
      })
      this.list.jsinfo1.forEach((item,idx) => {
        this.atPresent.forEach((val,i) => {
          if(item == i+1){
            val.check = true
          }
        })
      })
      this.list.zhengzhuang.forEach((item,idx) => {
        this.symptom.forEach((val,i) => {
          if(item == i+1){
            val.check = true
          }
        })
      })
      this.list.zhengzhuang1.forEach((item,idx) => {
        this.symptomQT.forEach((val,i) => {
          if(item == i+1){
            val.check = true
          }
        })
      })
    }
    var sum =  this.list.tzfen + this.list.jsfen + this.list.zzfen + this.list.hdfen 
    if(sum > 2){
      this.defen = "得分：" + sum 
      this.p = "营养不良"
    }else if(sum <= 2 ){
      this.defen = "得分：" + sum 
      this.p = "营养良好"
    }
    
  },
   
};
</script>
<style lang="less">
html {
  min-height: 100vh;
  background-color: #fff;
}
#PG-SGA {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 15px;
  .rom{
    height: 100vh;
    // overflow: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .van-radio__icon--disabled.van-radio__icon--checked .van-icon,
  .van-checkbox__icon--disabled.van-checkbox__icon--checked .van-icon {
      color: #fff;
      background-color: #1989fa;;
      border-color: #1989fa;;
  }
  .rom::-webkit-scrollbar {
  display: none; /* Chrome Safari */
  }
  .heaTitle{
    width: 90%;
    margin: 15px auto;
    display: flex;
    align-items: flex-end;
    p{
      display: inline-block;
    }
    .p2{
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .old .van-cell__title{
    span{
      display: block;
      width: 80vw;
    }
  }
  .top {
    height: 150px;
    background: #4e8af4;
    .van-nav-bar {
      color: #fff;
      border: 0 solid #4e8af4;
      background: #4e8af4;
      div {
        color: #fff;
        span {
          color: #fff;
        }
        i {
          color: #fff;
        }
      }
    }
    .van-hairline--bottom::after {
      border-bottom-width: 0px;
    }
    .date {
      width: 120px;
      height: 30px;
      border-radius: 10px;
      margin: 25px auto 0;
      background: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
    }
  }

  .bom-info {
    width: 94.53%;
    border-radius: 10px;
    margin: 15px auto 0;
    padding: 20px 12px;
    background: #fff;
    .journalTitle {
      display: flex;
      align-items: center;
      flex-direction: row;
      margin-bottom: 15px;
      img {
        width: 40px;
        height: 40px;
      }
      h1 {
        font-size: 16px;
        // color: #3b8afc;
        color: #000;
        font-family: SourceHanSansCN;
        font-weight: bold;
      }
    }
    .eat,
    .atPresent,
    .symptom,
    .activity,
    .weight{
       width: 100%;
       color: #929292;
       margin-top: 15px;
        .titleP{
          width: 100%;
          margin-bottom: 10px;
          font-size: 15px;
          text-align: left;
          font-weight: bold;
          color: #000000;
        }
        .eatCon{
          display: flex;
          align-items: flex-start;
          p{
            text-align: left;
          }
          .subject{
            p{
              margin-top: 2px;
            }
          }
        }
        .subjectCon{
          display: flex;
          align-items: center;
          .checkBox{
            margin-right: 20px;
          }
        }
      }
    .atPresent .subjectCon,
    .symptom .subjectCon,
    .activity .subjectCon{
      flex-direction: column;
      align-items: flex-start;
      .checkBox{
        margin-top: 10px;
      }

    }
    .activity{
      .van-radio{
        width: 100%;
      }
    }
    .serialNumber{
      font-size: 12px;
      display: inline-block;
      margin-right: 10px;
      margin-top: 5px;
      color: #fff;
      width: 16px;
      min-width: 16px;
      height: 16px;
      line-height: 20px;
      border-radius: 50%;
      background: #64C412;
    }
    
  }
  .van-radio{
    margin-top: 10px;
    align-items: flex-start;
    .van-radio__label{
      color:#929292;
      font-size: 14px;
      text-align-last: left;
    }
    
  }
 
  .van-checkbox{
    display: flex;
    align-items: center;
    .van-checkbox__label{
      color:#929292;
      font-size: 14px;
      margin-top: 4px;
    }
  }
  .line{
    width: 108%;
    margin: 15px 0 15px -4%;
    height: 1px;
    background: #D2D2D2;
    opacity: 0.5;
  }
  .weightCon{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 15px;
    color:#919191;
    .problemBox{
      display: flex;
      align-items: center;
      .problem{
        width: 47vw;
        text-align: left;
        margin-top: 10px;
        margin-right: 25px;
      }
      .serialNumber{
        margin-top: 10px;
      }
    }
    .serialNumber{
      margin-top: 0;
    }
  }
  .van-radio__icon{
    margin-top: 2px;
  }
  .van-radio__icon .van-icon,.van-checkbox__icon .van-icon{
    font-size: inherit;
  }
   .btn{
    width: 90vw;
    margin: 15px auto;

  }
    
}
</style>
